<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>lihSlider</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	ul,li,ol{list-style: none;}
	html{font-family: 'Microsoft Yahei';font-size: 12px;}

	.warp{width: 100%;}


	.lihSlider{width: 100%;overflow: hidden;box-sizing:border-box;}
	.lihSlider img{width:100%;vertical-align: bottom;}
	.lihSlider .img-box ul{width:20000px;}
	.lihSlider ul li{float:left;position: relative;}
	.lihSlider .img-box p{position: absolute;background-color: rgba(0,0,0,.3);color:#efefef;font-size: 1.2rem;bottom:0;width: 100%;padding:5px 10px;}
	.lihSlider {height: 100%;position: relative;}
	.lihSlider  .prev-btn,.lihSlider  .next-btn{display: block;width: 50px;height:80px;background-color: rgba(0,0,0,.3);color:#efefef;position: absolute;top:80px;opacity: 0; transition: all .3s;cursor: pointer;  font-size: 50px; font-family: ''; line-height: 80px;text-align: center;}
	.lihSlider  .prev-btn{left:-15px;}
	.lihSlider  .next-btn{right:-15px;}
	.lihSlider:hover .prev-btn{opacity: 1;left:0;}
	.lihSlider:hover .next-btn{opacity: 1;right:0;}
	.lihSlider .nav-dot{margin-top: 48%;position: absolute;margin-left: 50%}
	.lihSlider .nav-dot li{background-color: rgba(0,0,0,.3);color:#efefef;width: 18px;height:18px;border-radius: 50%;text-align: center;margin-left:3px;transition: all .3s;}
	.lihSlider .nav-dot li.active{background-color: #FF7400;color:#efefef;}
	</style>
</head>
<body>

	<div class="warp">
		<div id="lihSlider" class="lihSlider">
			<img data-src="http://h.hiphotos.baidu.com/zhidao/pic/item/34fae6cd7b899e5170a06c0b41a7d933c8950d86.jpg" data-href="#1" data-descript="RZXCAAA,Rumpage" alt="哈">
			<img data-src="http://imgsrc.baidu.com/forum/w=580/sign=8a813412379b033b2c88fcd225cf3620/94919d99a9014c0830ad01b3097b02087af4f443.jpg" data-href="#2" data-descript="脚趾缝进泥了" alt="哦">
			<img data-src="http://images.enet.com.cn/egames/articleimage/2013/0826/20130826022208143.jpg" data-href="#3" data-descript="第一滴血，风行者引领群雄" alt="额">
			<img data-src="http://images.enet.com.cn/egames/articleimage/2013/0826/20130826022206256.jpg" data-href="#3" data-descript="白昼行僵，暗夜魔王" alt="额">
		</div>
	</div>


	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
		(function ($) {
		    /* 插件的定义 */
		    $.fn.lihSlider = function (options) {
		    	$this = $(this);
		        // build main options before element iteration
		        var opts = $.extend({}, $.fn.lihSlider.defaults, options);
		        
		        // var imgArr = $(this).children("img")
		        var $DOM = initDom($this.children("img"));

		        $this.html($DOM)
		        initStyle($this)
		        $(window).resize(function(event) {
		        	initStyle($this)
		        });
		        

		        $DOM.eq(1).click(function(event) {
		        	prev($DOM)
		        });
		        $DOM.eq(3).click(function(event) {
		        	next($DOM)
		        });

		        var interval = setInterval(function(){next($DOM)},opts.delayTime);

		        $this.hover(function() {
		        	clearInterval(interval)
		        }, function() {
		        	interval = setInterval(function(){next($DOM)},opts.delayTime);
		        });
		    };

		    function next($DOM){
		    	
		    	$DOM.eq(0).find("li:eq(0)").animate({
		    		marginLeft: -$this.width()
		    		}, 300, function() {
		    		$(this).appendTo($(this).parent()).css("margin-left",0);

		    	});

		    	if ($DOM.eq(2).find(".active").next().length == 0) {
		    		$DOM.eq(2).find(".active").removeClass("active");
		    		$DOM.eq(2).find("li:eq(0)").addClass("active");
		    	}else{
		    		$DOM.eq(2).find(".active").removeClass("active").next().addClass("active")
		    	}
		    }

		    function prev($DOM){
		    	var $this = $DOM.eq(0).find("li:last").parent();
		    	$DOM.eq(0).find("li:last").prependTo($this).css("margin-left",-$this.width()).animate({
		    		marginLeft: 0
		    		}, 300, function() {
		    	});
		    	if ($DOM.eq(2).find(".active").prev().length == 0) {
		    		$DOM.eq(2).find(".active").removeClass("active");
		    		$DOM.eq(2).find("li:last").addClass("active");
		    	}else{
		    		$DOM.eq(2).find(".active").removeClass("active").prev().addClass("active")
		    	}
		    }

		    function initStyle($DOM){
		    	console.log($DOM.width())
		    	$DOM.eq(2).find("li:eq(0)").addClass("active")
		    	$DOM.find("li").has("img").css("width",$DOM.width())
		    	
		    }

		    
		    function initDom($imgArr){
		    	var imgBoxHtml = [];
		    	var navBoxHtml = [];

		    	imgBoxHtml.push('<div class="img-box"><ul>')
		    	navBoxHtml.push('<span class="prev-btn"><</span><ul class="nav-dot">')
		    	
		    	$imgArr.each(function(index, el) {

		    		imgBoxHtml.push('<li><a href="'+ $(el).data("href") +'">');
		    		imgBoxHtml.push('<img src="'+ $(el).data("src") +'" alt="'+ ($(el).attr("alt")?$(el).attr("alt"):'') +'"/>')
		    		if ($(el).data("descript")) {
			    		imgBoxHtml.push('<p>'+ $(el).data("descript") +'</p>')
		    		}
		    		imgBoxHtml.push('</a></li>')

		    		navBoxHtml.push('<li>'+ (index+1) +'</li>')
		    	})

		    	imgBoxHtml.push('</ul></div>')
		    	navBoxHtml.push('</ul><span class="next-btn">></span>')
		    	
		    	return $(imgBoxHtml.join("") + navBoxHtml.join(""))
		    }


		    $.fn.lihSlider.defaults = {
		        autoPlay : true,
		        delayTime : 5000,
		        navBtn : true
		    };

		    $.fn.lihSlider.version = "0.0.1";

		})(jQuery);

		$(function(){
			$("#lihSlider").lihSlider()
		});
	</script>
</body>
</html>